<template>
  <div class="site-center">
    <div class="kfzx-head">
      <span>中亿开放平台</span>
      <i>点击勾选，加入左侧导航栏</i>
    </div>

    <div class="ind-wd-guid">
      <div class="ind-wd-guid-item">
        <a href="javascript:void(0)" @click="changeTab('0')">
          <span :class="{'ind-wd-guid-se':activeTab === '0'}">产业金融</span>
        </a>
      </div>
      <div class="ind-wd-guid-item">
        <a href="javascript:void(0)" @click="changeTab('1')">
          <span :class="{'ind-wd-guid-se':activeTab === '1'}">产业经济</span>
        </a>
      </div>
      <div class="ind-wd-guid-item">
        <a href="javascript:void(0)" @click="changeTab('2')">
          <span :class="{'ind-wd-guid-se':activeTab === '2'}">产业服务</span>
        </a>
      </div>
    </div>

    <div v-if="curTabData.length" class="kfzx-cyjr-con" v-for="(item, index) in curTabData" :key="index">
      <div class="info-set-item-head kfzx-item-head">
        <span>{{item.dictItemName}}</span>
      </div>
      <ul id="kfzx-cyjr-lis">
        <li class="site-li" value="11" v-for="(option, key) in item.websiteAddrs" :class="{'kfzx-item-lis-se':option.collect}" :key="key">
          <span class="kfzx-cyjr-con-log" :class="{'no-img':!option.logo}">
            <img style="height: 76px;width: 76px;" v-if="option.logo" :src="option.logo">
            </span>
          <span class="kfzx-cyjr-con-c">
            <h2>{{option.siteName}}</h2>
            <p>{{option.comment}}</p>
          </span>
          <div class="kfzx-item-sel"><img src="../../assets/kfzx-item-se.png"></div>
          <div class="li-layer">
            <div class="li-layer-main">
              <button @click="linkToSite(option)" class="layui-btn layui-btn-radius layui-btn-primary layui-btn-sm">进入站点</button>
              <button v-if="option.collect" @click="removeSiteStar(option)" class="layui-btn layui-btn-radius layui-btn-primary layui-btn-sm">取消收藏</button>
              <button v-if="!option.collect" @click="modifySiteStar(option)" class="layui-btn layui-btn-radius layui-btn-primary layui-btn-sm">收藏站点</button>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div v-if="!curTabData.length&&!loading" style="padding: 40px;text-align: center;font-size: 16px;color: #999;">
      暂无内容
    </div>
  </div>
</template>
<script>
import * as api from '@/service/api'
export default {
  data () {
    return {
      loading: false,
      layerLoad: null,
      siteData: {},
      activeTab: '0',
      curTabData: []
    }
  },
  created () {
    this.layerLoad = window.layer.load(0, {
      shade: false
    })
    this.getSiteList()
  },
  methods: {
    async getSiteList () {
      try {
        this.loading = true
        let res = await api.getSiteList()
        this.siteData = res.data
        this.curTabData = []
        this.siteData[parseInt(this.activeTab)].children.map(item => {
          this.curTabData.push(item)
        })
        window.layer.close(this.layerLoad)
        this.loading = false
      } catch (e) {
        console.log(e)
        this.loading = false
        window.layer.close(this.layerLoad)
      }
    },
    changeTab (tab) {
      this.activeTab = tab
      this.curTabData = []
      this.siteData[parseInt(this.activeTab)].children.map(item => {
        this.curTabData.push(item)
      })
    },
    async modifySiteStar (item) {
      try {
        await api.modifySiteStar({
          siteId: item.siteId
        })
        this.getSiteList()
        this.$store.dispatch('getUserInfo')
      } catch (e) {
        console.log(e)
      }
    },
    async removeSiteStar (item) {
      try {
        await api.removeSiteStar({
          siteId: item.siteId
        })
        this.getSiteList()
        this.$store.dispatch('getUserInfo')
      } catch (e) {
        console.log(e)
      }
    },
    async modifyUserFoot (item) {
      try {
        await api.modifyUserFoot({
          userId: this.$store.state.me.user.userId,
          siteUrl: item.ipAdd + ':' + item.ipPort,
          siteName: item.siteName,
          siteLogo: item.logo
        })
      } catch (e) {
        console.log(e)
      }
    },
    linkToSite (item) {
      // this.modifyUserFoot(item)
      window.open(item.ipAdd + ':' + item.ipPort)
    }
  }
}
</script>
<style lang="scss">
.site-center {
  .site-li {
    position: relative;
  }
  .no-img {
    background-color: #dad9d9;
  }
  .li-layer {
    display: none;
  }
  .li-layer:before {
    content: "";
    position: absolute;
    top: 0;
    background-color: #666;
    opacity: 0.7;
    width: 100%;
    height: 100%;
  }
  .site-li:hover .li-layer,
  .site-li:hover .li-layer-main {
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .li-layer-main {
    text-align: center;
    margin-top: 35px;
  }
  .layui-btn-primary:hover {
    border-color: #e54528;
    color: #e54528;
  }
}
</style>
